<!-- subpkg_medicine/order_list/index.vue -->
<script setup>
import { ref } from 'vue'
import { orderListAPI } from '@/apis/doct';
      

 // 订单列表
  const orderList = ref([])
	const  getorderList=(status)=>{
		  
		orderListAPI(status).then((res)=>{
			console.log('订单列表',res);
			  
			orderList.value = res.data
		})
	}

 
   const activeID=ref(0)
   const onclick=(data)=>{
	    // console.log(data.index);
		activeID.value=data.index
	    // console.log(status);
		console.log('点击',data);
		// if(!data.rendered) getorderList(data.status)
		 getorderList(data.status)
		// feedTabs.value[activeID.value].rendered=true
   }
   
   // 标签页数据
   const feedTabs = ref([
     { label: ' 待支付 ', status: 10, rendered: true },
     { label: ' 待发货 ', status: 11, rendered: false },
     { label: ' 待收货 ', status: 12, rendered: false },
     { label: ' 已完成 ', status: 13, rendered: false },
     { label: ' 已取消 ', status: 14, rendered: false },
   ])
   
    const Status=(key)=>{
	   switch (key){
	   	case 10:
		    return '待支付'
	   		break;
		case 11:
		    return '待发货'
	   		break;
		case 12:
		    return '待收货'
	   		break;
		case 13:
		    return '已完成'
	   		break;
		case 14:
		    return '已取消'
	   		break;
	   	default:
		    return '订单错误'
	   		break;
	   }
   }
   getorderList()
</script>

<template>
  <view class="medicine-page">
    <view class="order-status-tabs">
      <custom-tabs :list="feedTabs" @click="onclick" ></custom-tabs>
    </view>
    <scroll-view
      refresher-enabled
      refresher-background="#f6f6f6"
      class="uni-scroll-view"
      scroll-y
    >
      <view class="order-list" >
		<!-- 类似keep缓存 -->
<!--      <view class="order-list" v-for="i,index of feedTabs" :key='i.status' v-show="activeID==index"> -->
		<!-- <view v-if="i.rendered"> -->
        <view class="order-list-item"  v-for="item,index in orderList.rows" :key="item.id">
          <view class="order-header" >
            <text class="number"> 订单编号: {{item.id}}</text>
            <text class="status"> {{Status(item.status)}} </text>
          </view>
          <navigator
            :url="`/subpack_medicine/orderDetail/index?id=${item.id}`"
            hover-class="none"
            class="order-body"
          >
            <view class="medicine" v-for="items in item.medicines">
              <image
                class="medicine-cover"
                :src="items.avatar"
                mode="aspectFill"
              />
              <view class="medicine-info">
                <text class="name"> {{items.name}} </text>
                <text class="unit symbol">{{items.prescriptionFlag}} 盒 </text>
                <text class="price">¥{{items.amount}}</text>
              </view>
              <view class="quantity">x{{items.quantity}}</view>
            </view>
          </navigator>
          <view class="order-footer">
            <view class="total"> 共 {{item.medicines.length}} 件商品 合计：¥{{item.actualPayment}} （运费¥{{item.expressFee}}）</view>
            <view class="buttons">
              <button class="uni-button minor" v-if='item.status==10'> 取消订单 </button>
              <button class="uni-button" v-if='item.status==10'> 继续支付 </button>
              <button class="uni-button"> <navigator  :url="`/subpack_medicine/orderDetail/index?id=${item.id}`">订单详情</navigator></button>
            </view>
          </view>
        </view>
		
		<!-- 加载状态 -->
		<uni-load-more
		  status="no-more"
		  color="#C3C3C5"
		  :icon-size="16"
		/>
		<!-- </view> -->
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  // subpkg_medicine/order_list/index.scss
  .medicine-page {
    height: 100vh;
    /* #ifdef H5 */
    height: calc(100vh - 44px);
    /* #endif */
    background-color: #f6f6f6;
    box-sizing: border-box;
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
  
    display: flex;
    flex-direction: column;
  }
  
  .order-status-tabs {
    padding: 20rpx 30rpx 0;
    background-color: #fff;
  
    :deep(.custom-tabs) {
      justify-content: space-evenly;
    }
  }
  
  .uni-scroll-view {
    flex: 1;
    overflow: hidden;
    padding-top: 15rpx;
  }
  
  .order-list {
    padding: 15rpx 30rpx 30rpx;
  }
  
  .order-list-item {
    // height: 715rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
    border-radius: 10rpx;
    background-color: #fff;
  
    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      padding: 0 30rpx;
      margin: 0 -30rpx;
      font-size: 26rpx;
      border-bottom: 1rpx solid #f5f5f5;
  
      .number {
        color: #848484;
      }
  
      .status {
        color: #f2994a;
      }
    }
  
    .medicine {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      position: relative;
  
      .medicine-cover {
        width: 180rpx;
        height: 160rpx;
        float: left;
      }
  
      .medicine-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 160rpx;
        padding-left: 20rpx;
  
        .name {
          font-size: 30rpx;
          font-weight: 500;
          color: #121826;
        }
  
        .unit {
          color: #979797;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          
          @include text-overflow(1);
  
          &.symbol::before {
            content: ' 处方药 ';
            line-height: 1;
            padding: 8rpx 10rpx;
            margin-right: 10rpx;
            border-radius: 4rpx;
            font-size: 24rpx;
            color: #fff;
            background-color: #16c2a3;
          }
        }
  
        .price {
          color: #eb5757;
          font-size: 32rpx;
        }
      }
  
      .quantity {
        top: 30rpx;
        right: 0;
        position: absolute;
  
        font-size: 30rpx;
        color: #121826;
      }
    }
  
    .order-footer {
      padding: 30rpx 0;
  
      .total {
        text-align: right;
        font-size: 24rpx;
        color: #3c3e42;
      }
  
      .buttons {
        display: flex;
        justify-content: flex-end;
        padding-top: 20rpx;
      }
  
      .uni-button {
        height: 60rpx;
        line-height: 60rpx;
        margin: 20rpx 0 0 30rpx;
        font-size: 26rpx;
        color: #16c2a3;
        border: 1rpx solid #16c2a3;
        background-color: #fff;
  
        &.minor {
          color: #3c3e42;
          border-color: #ededed;
          background-color: #f6f6f6;
        }
      }
    }
  }
</style>